<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东营销风云榜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../../css/part/tabHead.css">
    <link rel="stylesheet" href="../../../css/part/mini.css">
</head>

<body>

<div id="app">
    <div id="tableHead">
        <img src="../../../img/part/sz/excellent/performance1.png" id="branchHead" align="center">
        <a href="../../portal/navigationYX.html"><img src="../../../img/portal/min.png" id="miniImg"></a>
        <table width="100%">
        <tr>
            <thead>
            <th width="10%">NO</th>
            <th width="22%">机构</th>
            <th width="17%">当日预收</th>
            <th width="17%">当日承保</th>
            <th width="17%">当月预收</th>
            <th width="17%">当月承保</th>
            </thead>
        </tr>
    </table>
    </div>
    <div id="midDiv"></div>
    <div class="tableBody">
        <table id="tab" width="100%">
            <tbody id="tbody">
            </tbody>
        </table>
    </div>
</div>
</body>
<script src="../../../js/vue.js"></script>
<script src="../../../js/axios.js"></script>
<script src="../../../js/head.js"></script>
<script src="../../../js/jquery-3.2.1.min.js"></script>
<script src="../../../js/share.js"></script>

<script>
    window.onload = function () {
        new Vue({
            el: '#app',
            data() {
                return {
                    //中支当日预收
                    saleDeptDayAdvance: 0,
                    //中支当日承保
                    saleDeptDayInSure: 0,
                    //中支当月预收
                    saleDeptMonthAdvance: 0,
                    //中支当月承保
                    saleDeptMonthInSure: 0,
                    //中支名称
                    saleDeptsName: '',
                    pojo: {},
                    divHeight: 0
                }
            },
            created() {
                this.getSaleDeptData();
            },
            methods: {

                //获取各中支的数据
                getSaleDeptData() {
                    document.getElementById("midDiv").style.height = window.getComputedStyle(document.getElementById("tableHead")).getPropertyValue("height");
                    setTimeout(() => {
                        axios.get(`/performance/getSzPerformance`).then(response => {
                            this.pojo = response.data;
                            var str = "";
                            for (var i = 0; i < this.pojo.length; i++) {
                            //拼接表格的行和列
                            this.saleDeptDayAdvance = this.saleDeptDayAdvance + this.pojo[i].saleDeptDayAdvance;
                            this.saleDeptDayInSure = this.saleDeptDayInSure + this.pojo[i].saleDeptDayInSure;
                            this.saleDeptMonthAdvance = this.saleDeptMonthAdvance + this.pojo[i].saleDeptMonthAdvance;
                            this.saleDeptMonthInSure = this.saleDeptMonthInSure + this.pojo[i].saleDeptMonthInSure;

                            //拼接表格的行和列
                            str = "<tr><td width=\"10%\">" + (i + 1) + "</td>" +
                                "<td width=\"22%\">" + this.pojo[i].saleDeptsName + "</td>" +
                                "<td width=\"17%\">" + this.dataHandle(Math.round(this.pojo[i].saleDeptDayAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"17%\">" + this.dataHandle(Math.round(this.pojo[i].saleDeptDayInSure / 1000) / 10) + "</td>" +
                                "<td width=\"17%\">" + this.dataHandle(Math.round(this.pojo[i].saleDeptMonthAdvance / 1000) / 10) + "</td>" +
                                "<td width=\"17%\">" + this.dataHandle(Math.round(this.pojo[i].saleDeptMonthInSure / 1000) / 10) + "</td></tr>";
                            $("#tbody").append(str);
                        }
                        str = "<tr><th colspan=\"2\" style=\"font-weight: bolder\">" + '合计:' + "</th>" +
                            "<th width=\"17%\">" + this.dataHandle(Math.round(this.saleDeptDayAdvance / 1000) / 10) + "</th>" +
                            "<th width=\"17%\">" + this.dataHandle(Math.round(this.saleDeptDayInSure / 1000) / 10) + "</th>" +
                            "<th width=\"17%\">" + this.dataHandle(Math.round(this.saleDeptMonthAdvance / 1000) / 10) + "</th>" +
                            "<th width=\"17%\">" + this.dataHandle(Math.round(this.saleDeptMonthInSure / 1000) / 10) + "</th></tr>";
                        $("#tbody").append(str);
                        })
                    }, 200)
                },
                //数据处理
                dataHandle(_this) {
                    var data = _this + "";
                    if (data.indexOf(".") != -1) {
                        return data
                    }
                    return data + ".0";
                }
            }
        })
    }
</script>

</html>